import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Router} from "@angular/router";
@Component({
  selector: 'app-chart-huanxing',
  templateUrl: './chart-huanxing.component.html',
  styleUrls: ['./chart-huanxing.component.css']
})
export class ChartHuanxingComponent implements OnInit {

  constructor(
    private router: Router
  ) { }
  public isShow:boolean = false;
  public isShow2:boolean = false;
  public isShow3:boolean = false;
  public isShow4:boolean = false;
  public isShow5:boolean = false;
  public isShow6:boolean = false;
  // @ViewChild('huanxing')
  public huanxing:any
  ngOnInit() {
    const Highcharts  = (<any>window)['Highcharts'];
    const renderer = new Highcharts.Renderer(
      document.getElementById('container'),
      400,
      300
    );
    const router = this.router
    renderer.arc(150,150, 150, 120, -Math.PI*5/12, -Math.PI/12).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    }).on('mouseover', ()=>{
      this.isShow2 = true;
    }).on('mouseout', () => {
      this.isShow2 = false;
    });
    renderer.arc(150,150, 150, 120, -3*Math.PI/4, -Math.PI*5/12).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    }).on('mouseover', ()=>{
      this.isShow = true;
    }).on('mouseout', () => {
      this.isShow = false;
    });
    renderer.arc(150,150, 150, 120, -Math.PI*13/12, -3*Math.PI/4).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    }).on('mouseover', ()=>{
      this.isShow6 = true;
    }).on('mouseout', () => {
      this.isShow6 = false;
    });
    renderer.arc(150,150, 150, 120, -17*Math.PI/12, -Math.PI*13/12).attr({
        cursor: 'pointer',
        fill: '#ed4227',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    }).on('mouseover', ()=>{
      this.isShow5 = true;
    }).on('mouseout', () => {
      this.isShow5 = false;
    });
    renderer.arc(150,150, 150, 120, -7*Math.PI/4, -17*Math.PI/12).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    }).on('mouseover', ()=>{
      this.isShow4 = true;
    }).on('mouseout', () => {
      this.isShow4 = false;
    });
    renderer.arc(150,150, 150, 120, -Math.PI*25/12,-7*Math.PI/4).attr({
        cursor: 'pointer',
        fill: '#fcc81d',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    }).on('mouseover', ()=>{
      this.isShow3 = true;
    }).on('mouseout', () => {
      this.isShow3 = false;
    });
    renderer.arc(150,150, 120, 90, -Math.PI/4, 0).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI/2, -Math.PI/4).attr({
        cursor: 'pointer',
        fill: '#fcc81d',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI*3/4, -Math.PI/2).attr({
        cursor: 'pointer',
        fill: '#fcc81d',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI, -Math.PI*3/4).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI, -Math.PI*3/4).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -5*Math.PI/4, -Math.PI).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI*3/2, -5*Math.PI/4).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI*7/4, -3*Math.PI/2).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 120, 90, -Math.PI*2, -7*Math.PI/4).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 90, 60, -Math.PI/2, -Math.PI/6).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 90, 60, -Math.PI*5/6, -Math.PI/2).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 90, 60, -Math.PI*7/6, -Math.PI*5/6).attr({
        cursor: 'pointer',
        fill: '#3ec222',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 90, 60, -Math.PI*3/2, -Math.PI*7/6).attr({
        cursor: 'pointer',
        fill: '#fcc81d',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 90, 60, -Math.PI*11/6, -Math.PI*3/2).attr({
        cursor: 'pointer',
        fill: '#ed4227',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.arc(150,150, 90, 60, -Math.PI*13/6, -Math.PI*11/6).attr({
        cursor: 'pointer',
        fill: '#fcc81d',
        stroke: 'black',
        'stroke-width': 1
    }).add().on('click', function(){
        router.navigate(['/pages/condition-monitoring/diagram-overview/4']);
    });
    renderer.text('轴瓦分布图', 120, 154)
      .attr({
        cursor: 'pointer',
      })
      .css({color: '#0063cf'})
      .add();
    renderer.text('1#', 181, 92)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('2#', 214, 154)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('3#', 180, 216)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('4#', 104, 216)
        .attr({
        cursor: 'pointer',
    }).add();
    renderer.text('5#', 68, 154)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('6#', 104, 92)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('1#', 180, 60)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('2#', 237, 110)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('3#', 237, 190)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('4#', 180, 252)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('5#', 105, 252)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('6#', 45, 192)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('7#', 45, 110)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('8#', 105, 60)
        .attr({
        cursor: 'pointer',
    })
        .add();

    renderer.text('1#', 105, 25)
        .attr({
        cursor: 'pointer',
    })
        .add();

    renderer.text('2#', 245, 65)
        .attr({
        cursor: 'pointer',
    })
        .add();

    renderer.text('3#', 272, 185)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('4#', 182, 283)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('5#', 52, 254)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.text('6#', 9, 130)
        .attr({
        cursor: 'pointer',
    })
        .add();
    renderer.path(['M', 219, 160, 'L', 319, 160, 319, 240])
        .attr({
        'stroke-width': 1,
        stroke: '#ed4227'
    })
        .add();
    renderer.text('水导轴承', 295, 260)
        .attr({
        cursor: 'pointer',
    }).css({color: '#ed4227'})
        .add();
    renderer.path(['M', 160, 42, 'L', 289, 42,  289, 22])
        .attr({
        'stroke-width': 1,
        stroke: '#ed4227'
    }).add();
    renderer.text('下导轴承', 265, 18)
        .attr({
        cursor: 'pointer',
    }).css({color: '#ed4227'})
        .add();
    renderer.path(['M', 50, 70, 'L', 22, 70, 22,15])
        .attr({
        'stroke-width': 1,
        stroke: '#ed4227'
    }).add();
    renderer.text('上导轴承', 0, 10)
        .attr({
        cursor: 'pointer',
    }).css({color: '#ed4227'})
        .add();
  }
}
